<template>
  <div class="main_conntainer" :style="{backgroundImage:`url(${bgImg})`}">
     <div class="container">
        <el-button type="primary" icon="el-icon-thumb" circle @click="showPictures" style="margin-bottom:10px"></el-button>
        <transition name="fade">
          <div v-if="show" class="pictures">
            <!-- <img src="./image1.png" alt="picture1">
            <img src="./image2.png" alt="picture2">
            <img src="./image3.png" alt="picture3"> -->

             <el-button type="primary" size="small" round  @click="PageOneFm">页面1</el-button>
             <el-button type="primary" size="small" round style="margin-top:10px" @click="PageTwoFm">页面2</el-button>
             <el-button type="primary" size="small" round style="margin-top:10px" @click="PageSanFm">页面3</el-button>

          </div>
        </transition>
     </div>

  </div>
</template>

<script>
import pako from 'pako'
import protoRoot from "@/proto/proto.js";
import { sendWebsocket, closeWebsocket } from '@/utils/websocket.js'
export default {
  data() {
    return {
      bgImg:"./picOne.png",
      show: false  // 是否显示图片
    }
  },
  beforeDestroy () {
    // 页面销毁时关闭ws。因为有可能ws连接接收数据尚未完成，用户就跳转了页面
    // 在需要主动关闭ws的地方都可以调用该方法
    closeWebsocket()
  },
  mounted(){
    //  console.log('protoRoot')
    //  console.log(protoRoot)
    //  console.log('protoRoot')
     let  dataData = protoRoot.lookup("protocol.Login");
     let  dataDataOne=  dataData.create({ userId: 'BeiJing1-2', password: "1111",  });
     let  bufferData = dataData.encode(dataDataOne).finish();
     var arrayArr = Array.from(bufferData)
    let btyeData= this.IntToBytesLittleEndian(1,4)  
    let twoDataCommit=[...btyeData,...arrayArr]
    let btyeDatTwo=new Uint8Array(twoDataCommit).buffer
     console.log('MoveParm MoveParm')
     console.log(bufferData)
     console.log(arrayArr)
     console.log(btyeData)
     console.log(btyeDatTwo)
     console.log('MoveParm MoveParm')
     // 心跳，登录，登录返回（服务器发送），移动
     sendWebsocket('ws://123.249.69.100:9090', btyeDatTwo, this.wsMessage, this.wsError)
     // Array 转成 Uint8Array

  },
  methods: {
     
      IntToBytesLittleEndian(number, length){
        var bytes = [];
        var i = 0;
        do {
        bytes[i++] = number & (255);
        number = number>>8;
        } while ( i < length )
        return bytes;
    },

    showPictures() {
      this.show = !this.show;  // 点击按钮后切换show的值，实现显隐效果
    },
    PageOneFm(){
      this.bgImg ="./picOne.png"; 
      this.requstWs()
    },
    PageTwoFm(){
     this.bgImg ="./picTwo.png";
    },
    PageSanFm(){
     this.bgImg ="./picSan.png";
    },
    // ws连接成功，后台返回的ws数据，组件要拿数据渲染页面等操作
    wsMessage (data) {
      const dataJson = data
      const bf = dataJson.data;
      const newStart = bf.slice(0, 4); // 从0 - 9 不包括 10
      const newBEnd = bf.slice(4, 8); // 从0 - 9 不包括 10

      const uIntStart = new Uint8Array(newStart)
      var arrayStart = Array.from(uIntStart)
      const uIntEnd = new Uint8Array(newBEnd)
      let  dataData = protoRoot.lookup("protocol.LoginEnd");
      if(arrayStart.toString()==[2,0,0,0].toString()){
           console.log(dataData.decode(uIntEnd))
      }
       console.log( ' sucess sucess sucess' )
       console.log(uIntStart)
       console.log(arrayStart)
       console.log(dataJson)
      //console.log(susData.decode())
      // console.log(dataJson)
      // console.log(dataJson.data)
      // console.log(newBf)
      //console.log(   String.fromCharCode.apply(null, new Uint8Array(newBEnd))  )
      console.log( ' sucess sucess sucess' )

    },
    // ws连接失败，组件要执行的代码
    wsError (error) {
       console.log('错误 错误')
       console.log(error)
       console.log('错误 错误')
      // 比如取消页面的loading
    },
    requstWs () {
      console.log('点击触发了吗')
      // 防止用户多次连续点击发起请求，所以要先关闭上次的ws请求。
     // closeWebsocket()
      // 跟后端协商，需要什么参数数据给后台
   
     let  dataData = protoRoot.lookup("protocol.Move");
     let  dataDataOne=  dataData.create({ x: 0, audio: "1",  });
     let  bufferData = dataData.encode(dataDataOne).finish();
     var arrayArr = Array.from(bufferData)
    let btyeData= this.IntToBytesLittleEndian(3,4)  
    let twoDataCommit=[...btyeData,...arrayArr]
    let btyeDatTwo=new Uint8Array(twoDataCommit).buffer
     console.log('mmmmmmmmmmmmmm')
     console.log(bufferData)
     console.log(arrayArr)
     console.log(btyeData)
     console.log(btyeDatTwo)
     console.log('mmmmmmmmmmmmmmmmm')
     // 心跳，登录，登录返回（服务器发送），移动
     sendWebsocket('ws://123.249.69.100:9090', btyeDatTwo, this.wsMessage, this.wsError)

      //sendWebsocket('ws://192.1.102.59:9090', bufferData, this.wsMessage, this.wsError)
      //心跳，登录，登录返回（服务器发送），移动
      // 192.1.102.59:9090
      // npx pbjs -t json-module -w commonjs -o src/proto/MessageHead.js src/proto/MessageHead.proto  前
      // npx pbjs -t json-module -w commonjs -o src/proto/Message.js src/proto/Message.proto   后

      /*
          点3个按钮都是发送消息Move 数据是：

            protocol.Move m = new protocol.Move();
            m.x = 0;
            m.audio = "1";
            
            protocol.Move m = new protocol.Move();
            m.x = -800;
            m.audio = "2";

            protocol.Move m = new protocol.Move();
            m.x = 400;
            m.audio = "3";


      */


    }

  }
}
</script>

<style scoped>
.main_conntainer{
  padding:8px;
  width: 100%;
  height:90vh;
  background-size: 100%;
  background-repeat: no-repeat;

}
.container {

}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.6s;
}

.fade-enter, .fade-leave-to {
  opacity:0.6 ;
}

.pictures {
  display: flex;
  flex-direction: column;
 align-items: baseline;
  /* display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; */
}

.pictures img {
  max-width: 100%;
  margin: 10px;
  /* position: ab; */
}
</style>